<template>
	<view class="container">
		<view class="appointment" v-if="waitload">
			<view class="appointment-image">
				<image :src="shopMoveBanner" mode=""></image>
			</view>
			<view class="appointment-wrap">
				<view class="appointmentTime" v-if="appointmentType == 1">
					<view class="picktime">
						<view class="time">
							预约时间:
						</view>
						<hTimePicker sTime="0" cTime="23" interval="1" @changeTime="changeTime">
							<view slot="pCon" class="changeTime">
								{{timeText?timeText:'请选择预约的时间'}}
							</view>
						</hTimePicker>
					</view>
					<view class="appointment-number">
						<view class="title">预约人数</view>
						<view class="numberlist">
							<view @click="checknum(index,item)" v-for="(item,index) in numberlist" :key="index" class="default" :class="numberlistIndex ==index ?'numberlistActive':'numberlistdefault'">{{item}}</view>
						</view>
					</view>
				</view>
				<view class="appointment-project">
					<view class="project-title-info">
						<view class="title">预约项目</view>
						<view class="flex_">
							<view class="ls" :class="selectIndex == 0 ? 'acitve':'ls'" @click="selectlb(0)">零售项目</view>
							<view class="md" :class="selectIndex == 1 ? 'acitve':'md'" @click="selectlb(1)">免单项目</view>
						</view>
					</view>
					<view class="project-detail" v-show="selectIndex == 0">
						<view @click="changeproject(index)" :class="projectIndex == index?'project-detail-active comment':'comment'"
						 v-for="(item,index) in projectList" :key="index">
							<view class="ellipsis_ commwidth">{{item.goodsName}}</view>
							<view class="price">￥{{item.shopPrice}}</view>
							<view class="commflex subtract">
								<image @click="add('minus','num',index,'0')" class="minus" v-show="item.num != 0" src="/static/minus.png" mode=""></image>
								<text class="number" v-show="item.num != 0">{{item.num}}</text>
								<image @click="add('add','num',index,'0')" :class="item.num ==0 ?'defaultadd':'add'" src="/static/add.png" mode=""></image>
							</view>
						</view>
						<view class="totalprice">总价：<text class="price">￥{{allprice}}</text></view>
					</view>
					<view class="project-detail" v-show="selectIndex == 1">
						<view @click="changeproject(idx)" :class="projectIndex == idx?'project-detail-active comment':'comment'" v-for="(item,idx) in subprojectlist"
						 :key="idx">
							<view class="ellipsis_ commwidth">{{item.goodsName}}</view>
							<view class="price">￥{{item.shopPrice}}</view>
							<view class="commflex subtract">
								<image @click="add('minus','num',idx,'1')" class="minus" v-show="item.num != 0" src="/static/minus.png" mode=""></image>
								<text class="number" v-show="item.num != 0">{{item.num}}</text>
								<image @click="add('add','num',idx,'1')" :class="item.num ==0 ?'defaultadd':'add'" src="/static/add.png" mode=""></image>
							</view>
						</view>
						<view class="totalprice">总价：<text class="price">￥{{allprice}}</text></view>
					</view>
				</view>
				<view class="appointment-userinfo">
					<view class="userinfo-tab">
						<view @click="checkusertab(0)" :class="showTab ==0 ? 'userinfo-tab-acitve':''">使用规则</view>
						<view @click="checkusertab(1)" :class="showTab ==1 ? 'userinfo-tab-acitve':''">推荐搭配</view>
						<view @click="checkusertab(2)" :class="showTab ==2 ? 'userinfo-tab-acitve':''">用户评价</view>
					</view>
					<view class="userinfo-content">
						<view class="rules" v-show="showTab==0">
							<rich-text :nodes="ruleDesc"></rich-text>
						</view>
						<view class="" v-show="showTab == 1">
							<view class="content-list" v-for="(item,idx) in dplist" :key="idx">
								<view class="ellipsis_ commwidth">{{item.goodsName}}</view>
								<view class="subtract">
									<view>￥{{item.shopPrice}}</view>
									<view class="addproject" @click="addproject('num',item,idx)">添加到项目</view>
								</view>
							</view>

							<empty v-if="showempty" emptyText="暂无推荐搭配,请选择上面项目"></empty>
						</view>
						<view class="evaluate" v-show="showTab == 2">
							<!-- <view class="userimg">
								<img src="https://gua.qinmaoyi.cn/upload/shopconfigs/2020-07/5f1ce72b43191.jpg" mode=""></img>
							</view> -->
							<!-- <view class="evaluate-r">
								<view class="username">
									<view>AKA小迪</view>
									<uniRate activeColor="#f7b804" :size="10" :disabled="true" :value='3'></uniRate>
									<view class="time">2020-07-27 18:00:00</view>
								</view>
								<view class="comm">
									这是一条评价
								</view>
							</view> -->
						</view>
					</view>
				</view>
			<!-- 	<view class="message">
					<view class="title">留言</view>
					<input type="text" @input="inputChange" data-key="message" :value="message" placeholder="输入想对商家说的话">
				</view> -->
				<view class="user-contact">
					<view class="username">
						<view class="commflex">
							<view class="commcolor">*</view>
							<view>联系人</view>
						</view>
						<input type="text" @input="inputBlur" data-name="name" class="name" :value="name" placeholder="请输入联系人姓名" />
					</view>
					<view class="usermobile">
						<view class="commflex">
							<view class="commcolor">*</view>
							<view>联系电话</view>
						</view>
						<input type="mobile" @input="inputBlur" data-name="mobile" class="phone" :value="mobile" placeholder="请输入联系人电话" />
					</view>
				</view>
			</view>
			<view style="margin-bottom:10px;">
				<view class="immediately" @click="immediately">立即购买</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniRate from '@/components/uni-rate/uni-rate.vue'
	import hTimePicker from "@/components/h-timePicker/h-timePicker.vue";

	function unique(arr) {
		return Array.from(new Set(arr))
	}
	export default {
		components: {
			hTimePicker,
			uniRate
		},
		data() {
			return {
				// message: '',
				appointmentType: 1,
				chekedlist: [],
				appointmentSelected: '',
				dplist: [],
				waitload: false,
				rules: '',
				banner: '',
				shopId: '',
				datetime: '',
				showsublist: false,
				showempty: false,
				subprojectlist: [],
				recommendGoodsList: [],
				totalPrice: 199,
				number: 0,
				showTab: 0,
				name: '',
				mobile: '',
				projectIndex: 0,
				projectList: [],
				freeprojectlist: [],
				selectIndex: 0,
				numberlistIndex: 0,
				timeText: '',
				numberlist: [],
				defaultlist: [],
				ruleDesc: '',
			}
		},
		watch: {
			'projectList': {
				handler: function handler(newVal, oldVal) {
					let that = this;
					var newobj = newVal;
					var oldobj = oldVal
					let totalnum = 0;
					let maxnum = 0;
					for (var i = 0; i < newobj.length; i++) {
						if (newobj[i].num == 0) {
							totalnum++;
						} else {
							maxnum++;
						}
					}
					// if (newobj.length == totalnum) {
					// 	that.showsublist = true;
					// 	// that.$nextTick(function() {
					// 	that.subprojectlist = [];
					// 	// that.$set(that.subprojectlist,that.subprojectlist,'')
					// 	// })
					// 	console.log(that.subprojectlist)
					// 	console.log('触发了')

					// }
					// newobj.length == maxnum ? this.subprojectlist = [] : this.subprojectlist = this.subprojectlist;
				},
				immediate: true,
				deep: true
			}
		},
		computed: {
			allprice: function() {
				var totalPrice = 0;
				var len = this.projectList.length;
				for (var i = 0; i < len; i++) {
					totalPrice += this.projectList[i].shopPrice * this.projectList[i].num;
				}
				return totalPrice;
			}
		},
		onLoad(options) {
			this.shopId = options.shopId
			this.loadData()
			uni.getStorageSync('checkedlist') ? [this.showsublist = true, this.appointmentType = 2] : this.showsublist = false

		},
		onShow() {
			this.chekedlist = []
		},
		methods: {

			inputChange(e) {
				const key = e.currentTarget.dataset.key;
				this[key] = e.detail.value;
			},
			inputBlur(e) {
				let key = e.currentTarget.dataset.name;
				this[key] = e.detail.value
			},
			deepCopy(val) {
				return JSON.parse(JSON.stringify(val))
			},
			loadData() {
				let that = this;
				let data = {
					shopId: that.shopId
				}
				that.$Request.request('/api/shop/appointmentDetail', 'GET', data).then(res => {
					if (res.status == 1) {
						that.shopMoveBanner = res.data.shopMoveBanner
						that.numberlist = res.data.appointmentSelector
						that.defaultlist = res.data.appointmentGoodsList
						that.subprojectlist = res.data.freeAppointmentGoodsList;
						if (res.data.appointmentGoodsList.length != 0) {
							that.dplist = res.data.appointmentGoodsList[0].recommendGoodsList
							that.ruleDesc = res.data.appointmentGoodsList[0].ruleDesc
						}
						if (uni.getStorageSync('checkedlist')) {
							that.projectList = uni.getStorageSync('checkedlist');
							uni.removeStorageSync('checkedlist')
						} else {
							that.projectList = res.data.appointmentGoodsList
							that.projectList.forEach(item => {
								item.num = 0;
							})
						}
						that.subprojectlist.forEach(item => {
							item.num = 0;
						})
						this.waitload = true
					} else {

					}
				}).catch(error => {
					console.log(error)
				})
			},
			addproject(type, program, index) {
				let that = this;
				let ind = 'num'
				// let num = list[index][ind]
				let list = program;
				let idx = index;
				let item = that.projectList;
				that.projectList.forEach((item, index) => {
					if (item.goodsId == list.goodsId) {
						that.add('add', 'num', index, '0', '1')
					}
				})

			},
			getsortlist() {
				let that = this;
				// that.showsublist ? that.subprojectlist = [] : that.subprojectlist = that.projectList[0].subproject
				// that.$Request.request('/api/shop/catList', 'GET').then(res => {
				// 	that.secCates = res.data.list;
				// })
			},
			add(property, val, index, type, status) {
				let that = this;
				let list = [];
				if (type == 0) {
					list = that.deepCopy(that.projectList);
				} else {
					list = that.deepCopy(that.subprojectlist);
				}
				console.log(list)
				switch (property) {
					case 'add':
						var ind = 'num'
						var num = list[index][ind]
						num++;
						list[index][ind] = num;

						type == 0 ? that.projectList = that.deepCopy(list) : that.subprojectlist = that.deepCopy(list)
						// if (type != 1) {
						// 	console.log(list[index])
						// 	that.dplist = list[index].recommendGoodsList
						// 	that.ruleDesc = list[index].ruleDesc
						// }else{
						// 	console.log(list[index].ruleDesc)
						// }
						break;
						//点击的是箱还是件
					case 'minus':
						//点击的是箱还是件
						var nowIndex = 'num'
						var num = list[index][val];
						if (num == 0) {
							return false;
						}
						num--;
						list[index][val] = num;
						type == 0 ? that.projectList = that.deepCopy(list) : that.subprojectlist = that.deepCopy(list)
						// if (type != 1) {
						// 	that.dplist = list[index].recommendGoodsList
						// 	that.ruleDesc = list[index].ruleDesc
						// }
						break;
				}
			},
			checkusertab(status) {
				this.showTab = status;
			},
			changeTime(data, time) {
				this.timeText = data;
				this.datetime = time / 1000;
				let myDate = new Date();
				let weekend = myDate.getDay()
				let weeks = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
				let week = weeks[weekend]
			},
			checknum(index, status) {
				this.numberlistIndex = index;
				this.appointmentSelected = status
			},
			selectlb(index) {
				let that = this;
				that.selectIndex = index;
				that.dplist = []
				that.ruleDesc = '';
				that.showTab = 0
				that.projectIndex = 0;
				if (index == 1) {
					that.subprojectlist.length == 0 ? '' : [that.dplist = that.subprojectlist[0].recommendGoodsList, that.ruleDesc =
						that.subprojectlist[0].ruleDesc
					]

				} else {
					that.dplist = that.defaultlist[0].recommendGoodsList
					that.ruleDesc = that.defaultlist[0].ruleDesc
				}
			},
			changeproject(index) {
				let that = this;
				console.log('change')
				console.log(index)
				that.projectIndex = index;
				if (that.selectIndex == 1) {
					console.log(that.subprojectlist)
					that.subprojectlist.length == 0 ? '' : [that.dplist = that.subprojectlist[index].recommendGoodsList, that.ruleDesc =
						that.subprojectlist[index].ruleDesc
					]
				} else {
					that.dplist = that.projectList[index].recommendGoodsList
					that.ruleDesc = that.projectList[index].ruleDesc
				}
			},
			immediately() {
				let that = this;
				// if (that.appointmentType == 2) {

				// } else {
				// 	if (that.datetime == '') {
				// 		that.$api.msg('请选择预约时间')
				// 		return;
				// 	}
				// }
				// if (that.name == '') {
				// 	that.$api.msg('请填写预约姓名')
				// 	return;
				// }
				// if (that.moblie == '') {
				// 	that.$api.msg('请填写预约人联系方式')
				// 	return;
				// }
				that.chekedlist = []
				if (that.subprojectlist.length != 0) {
					that.subprojectlist.forEach(item => {
						if (item.num >= 1) {
							console.log(item, 'sub')
							that.chekedlist.push({
								goodsId: item.goodsId,
								cartNum: item.num
							})
						}
					})
				}
				that.projectList.forEach(item => {
					if (item.num >= 1) {
						console.log(item, 'pro')
						that.chekedlist.push({
							goodsId: item.goodsId,
							cartNum: item.num
						})
					}
				})

				let data = {
					appointmentType: that.appointmentType,
					cartList: JSON.stringify(that.chekedlist),
					appointmentTime: that.datetime,
					appointmentSelected: that.appointmentSelected || that.numberlist[0],
					userName: that.name,
					userPhone: that.mobile,
					['emark_' + that.shopId]: 0,
					['couponId_' + that.shopId]: 0,
					isInvoice: 0,
					payType: 4,
					payCode: 'wallets',
					isUseScore: 0,
					useScore: 5303
				}
				that.$Request.request('/api/shop/appointmentSubmit', 'POST', data).then(res => {
					if (res.status == 1) {
						if (that.appointmentType == 2) {
							uni.removeStorageSync('checkedlist');
						}
						uni.navigateTo({
							url: '/pages/money/pay?pkey=' + res.pkey
						})
					}
				}).catch(error => {
					that.chekedlist = []
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.appointment-image {
		width: 100%;
		padding-top: 20upx;

		uni-image {
			border-radius: 20px;
			padding: 0px 25upx;
			width: 100%;
		}
	}

	.message {
		border-radius: 20upx;
		padding: 20upx;
		/* border: 1px solid #f2f2f2; */
		box-shadow: #ccc 0px 0px 20upx;
		margin-bottom: 30upx;
		font-size: 28upx;
		min-height: 120upx;
	}

	.appointment-wrap {
		padding: 0px 10px;
	}

	.acitve {
		color: #feb125 !important;
		z-index: 55 !important;
		box-shadow: #ccc 0px -10px 10px !important;
	}

	.appointmentTime {
		background-color: #fff;
		position: relative;
		width: 100%;
		top: 35%;
		box-shadow: 0px 0px 0px 2px #ccc;
		box-shadow: #ccc 0px 0px 20upx;
		border-radius: 20upx;
		z-index: 10;
		margin-top: -50upx;
		margin-bottom: 25upx;
	}

	.picktime {
		padding: 20upx;
		font-size: 28upx;
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-pack: justify;
		-webkit-justify-content: space-between;
		justify-content: space-between;
		padding: 10px;
		font-size: 14px;
		-webkit-box-align: center;
		-webkit-align-items: center;
		align-items: center;
	}

	.appointment-number {
		font-size: 28upx;
		padding: 20upx;

		.numberlist {
			display: flex;
			justify-content: center;
			padding-top: 10upx;
			align-items: center;
			text-align: center;

			.default {
				-webkit-box-flex: 1;
				-webkit-flex: 1;
				flex: 1;
				border-radius: 20upx;
				margin: 0px 6upx;
				height: 40upx;
				line-height: 40upx;
			}

			.numberlistdefault {
				background-color: #fff;
				border: 1px solid #ccc;
				color: #333;
			}
		}

		.numberlistActive {
			background-color: rgb(254, 177, 37);
			border: 1px solid rgb(254, 177, 37);
			color: #fff;

		}
	}

	.appointment-project {
		margin-bottom: 30upx;

		.project-title-info {
			font-size: 28upx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-left: 20upx;

			.title {
				color: #333;
			}

			.flex_ {
				display: flex;

				.ls {
					color: #ccc;
					border-radius: 7px 7px 7px 0px;
					width: 160upx;
					height: 60upx;
					line-height: 60upx;
					box-shadow: #ccc 0px 0px 20upx;
					text-align: center;
					border-bottom: none;
					background-color: #fff;
				}

				.md {
					color: #ccc;
					border-radius: 7px 7px 7px 0px;
					width: 160upx;
					height: 60upx;
					line-height: 60upx;
					box-shadow: #ccc 0px 0px 20upx;
					text-align: center;
					border-bottom: none;
					background-color: #fff;
				}
			}
		}

		.project-detail {
			font-size: 28upx;
			padding: 40upx 20upx;
			/* line-height: 2; */
			box-shadow: #ccc 0px 0px 20upx;
			border-radius: 20upx 0px 20upx 20upx;
			position: relative;
			margin-top: -3px;
			background-color: #fff;
			z-index: 10;
			border-radius-right: none;

			.commwidth {
				width: 450upx;
			}

			.subtract {
				width: 120upx;
				justify-content: flex-end;
				margin-left: 25px;
			}

			.project-detail-default {}

			.project-detail-active {
				background-color: #f8f8f8 !important;
			}

			.totalprice {
				text-align: right;
				padding: 15px 10px 0px 0px;
			}

			.price {
				color: #ff6600;
				width: 140upx;
			}

			.comment {
				display: -webkit-box;
				display: -webkit-flex;
				display: flex;
				-webkit-box-pack: justify;
				-webkit-justify-content: space-between;
				justify-content: space-between;
				background-color: #fff;
				color: #333;
				// padding: 20upx 20px;
				margin-bottom: 20upx;
				border-radius: 20upx;
				padding: 10px;

				.defaultadd {
					margin-left: 10px;
					width: 30upx;
					height: 30upx;
				}

				.number {
					font-size: 28upx;
					color: #999;
					display: inline-block;
					padding: 0px 5px;
				}

				.minus {

					// margin-left: 25px;
				}

				.add,
				.minus {
					width: 30upx;
					height: 30upx;

					img {
						width: 100%;
						height: 100%;
					}
				}
			}
		}
	}

	.appointment-userinfo {
		border-radius: 20upx;
		padding: 20upx;
		/* border: 1px solid #f2f2f2; */
		box-shadow: #ccc 0px 0px 20upx;
		margin-bottom: 30upx;
		font-size: 28upx;
		min-height: 320upx;

		.userinfo-tab {
			display: flex;
			justify-content: space-between;
			padding: 0px 20upx 20upx 20upx;
			align-items: center;

			.userinfo-tab-acitve {
				border-bottom: 1px solid #feb125;
				color: #feb125;
			}
		}

		.userinfo-content {
			.evaluate {
				display: flex;
				font-size: 20upx;
				// border-bottom: 1px solid #f2f2f2;
				padding-bottom: 5px;
				padding: 10px;

				.userimg {
					width: 60upx;
					height: 60upx;

					img {
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}
				}

				.evaluate-r {
					display: flex;
					flex-direction: column;
					margin-left: 5px;

					.username {
						display: flex;
						align-items: center;

						.time {
							color: #ccc;
						}
					}

					.comm {
						white-space: nowrap;
						width: 300px;
						overflow: hidden;
						text-overflow: ellipsi
					}
				}
			}

			.content-list {
				display: -webkit-box;
				display: -webkit-flex;
				display: flex;
				-webkit-box-align: center;
				-webkit-align-items: center;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1px solid #f2f2f2;
				padding: 20upx 0px;
				color: #999;
				font-size: 24upx;

				.subtract {
					display: -webkit-box;
					display: -webkit-flex;
					display: flex;
					-webkit-box-align: center;
					-webkit-align-items: center;
					align-items: center;


				}

				.addproject {
					margin-left: 45upx;
					border-radius: 5px;
					width: 150upx;
					font-size: 20upx;
					height: 40upx;
					line-height: 40upx;
					background-color: #ff6600;
					color: #fff;
					text-align: center;
				}
			}
		}
	}

	.user-contact {
		display: flex;
		font-size: 28upx;
		padding: 20upx;


		.commcolor {
			line-height: 50upx;
			margin-right: 10upx;
			color: #feb125;
		}

		.name {
			border-bottom: 1px solid #f2f2f2;
			padding-bottom: 3px;
			height: 66upx;
			width: 85%;
			font-size: 28upx;
		}

		.phone {
			border-bottom: 1px solid #f2f2f2;
			padding-bottom: 3px;
			height: 66upx;
			width: 85%;
			font-size: 28upx;
		}
	}

	.immediately {
		width: 300upx;
		margin: 0 auto;
		color: #fff;
		text-align: center;
		background-color: #f34e00;
		margin: 0 auto;
		font-size: 28upx;
		height: 60upx;
		line-height: 60upx;
		border-radius: 20upx;
	}

	.commflex {
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-align: center;
		-webkit-align-items: center;
		align-items: center;
	}
</style>
